<template>
  <div>
    <el-card>
      <div class="font-20 font-bold">全部MV</div>
      <!-- mv分类筛选 -->
      <div class="tag-wrapper">
        <div class="radio-list">
          <span class="w-60">地区：</span>
          <el-radio-group v-model="queryInfo.area">
            <el-radio v-for="(ar, index) in catList.area" :key="index" :label="ar">
              {{ar}}
            </el-radio>
          </el-radio-group>
        </div>
        <div class="radio-list">
          <span class="w-60">类型：</span>
          <el-radio-group v-model="queryInfo.type">
            <el-radio v-for="(ty, index) in catList.type" :key="index" :label="ty">
              {{ty}}
            </el-radio>
          </el-radio-group>
        </div>
        <div class="radio-list">
          <span class="w-60">排序：</span>
          <el-radio-group v-model="queryInfo.order">
            <el-radio v-for="(or, index) in catList.order" :key="index" :label="or">
              {{or}}
            </el-radio>
          </el-radio-group>
        </div>
      </div>
      <MvList :list="mvList" @loadMore="load" :disable="disabled"></MvList>
    </el-card>
  </div>
</template>

<script>
import { getAllMv } from "@/api/request";
import MvList from "@/components/list/MvList.vue"
export default {
  components:{
    MvList
  },
  data() {
    return {
      catList: {
        area: ["全部", "内地", "港台", "欧美", "日本", "韩国"],
        type: ["全部", "官方版", "现场版", "网易出品"],
        order: ["上升最快", "最热", "最新"],
      },
      queryInfo: {
        area: "全部",
        type: "全部",
        order: "最新",
        limit: 16,
      },
      offset: 0,
      mvList:[],
      hadMore : true,
      isLoading : false ,
      mode : 'first'
    };
  },
  computed:{
    disabled(){
      return this.isLoading || !this.hadMore;
    }
  },
  watch:{
    queryInfo:{
      deep:true,
      handler(){
        this.mode = 'first';
        this.getMvList();
      }
    }
  },
  created(){
    this.getQuery();
    this.getMvList();
  },
  methods:{
    //获取列表参数
    async getMvList(){
      if(this.isLoading) return;
      this.isLoading == true;
      const {data:res} = await getAllMv({
        ...this.queryInfo,offset : this.offset
      });
      console.log(res);
      if(res.code !== 200) {this.isLoading = false ;return};
      if(this.mode == 'first') this.mvList = res.data;
      else this.mvList.push(...res.data);
      this.hadMore = res.hasMore;
      this.isLoading = false ;
    },
    //获取路由传参中的地区参数
    getQuery(){
      let query = this.$route.query;
      if(
        query.area && 
        this.catList.area.findIndex((item) => item === query.area) !== -1
      ){
        this.queryInfo.area = query.area;
      }
      if(
        query.type &&
        this.catList.type.findIndex((item) => item=== query.type) !== -1
      ){
        this.queryInfo.type = query.type;
      }
    },
    load(length){
      this.offset = length + 8;
      this.mode = 'more';
      this.getMvList();
    }
  }
};
</script>

<style lang="less" scoped>
.radio-list{
  display: flex;
  flex-wrap: wrap;
  line-height: 20px;
  margin-top: 10px;
  span{
    height: 30px;
    line-height: 30px;
  }
  .el-radio-group {
    width: 80%;
    .el-radio{
      width: 60px;
      height: 30px;
      line-height: 30px;
    }
  }
}
/deep/.el-radio__inner{
  display: none;
}
</style>